<template>
  <div class="absolute inset-0 p-2">
    <div class="table-container h-full flex flex-col">
      <div class="flex-1">
        <el-table v-if="tableHeight" :data="tableData" :height="tableHeight">
          <el-table-column type="index" label="Order" width="100"></el-table-column>
          <el-table-column prop="time" label="Time"></el-table-column>
          <el-table-column prop="accuracy" label="Accuracy">
            <template #default="scope">
              {{ scope.row.accuracy === 1 ? '✅' : '❌' }}
            </template>
          </el-table-column>
          <el-table-column prop="number" label="Number">
            <template #default="scope">
              <div style="min-height: 92px" class="flex items-center">{{ scope.row.number }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="kill_array" label="Kill" width="230">
            <template #default="scope">
              <span v-if="!scope.row.kill_array"> - </span>
              <div v-else>
                <span v-for="item in scope.row.kill_array" :key="item">
                  <span>{{ item }}</span>
                  <span v-if="item !== scope.row.kill_array[scope.row.kill_array.length - 1]">, </span>
                </span>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="lucky_array" label="Lucky Array" width="210">
            <template #default="scope">
              <span v-if="!scope.row.lucky_array"> - </span>
              <div v-else>
                <span v-for="item in scope.row.lucky_array" :key="item">
                  <span>{{ item }}</span>
                  <span v-if="item !== scope.row.lucky_array[scope.row.lucky_array.length - 1]">, </span>
                </span>
              </div>
            </template>
          </el-table-column> -->
          <el-table-column label="action" width="220" fixed="right">
            <template #default="scope">
              <el-button type="text" size="small">detail</el-button>
            </template>
          </el-table-column>
          <!-- 其他列 -->
        </el-table>
      </div>
      <div class="flex items-center justify-between" style="height: 40px">
        <div class="flex items-center td-text pl-2.5">
          <div class="mr-4">
            <span class="pr-2">success rate:</span>
            <span>{{ accuracyCount[1] }}/{{ accuracy.length }}={{ successRate }}%</span>
            <span></span>
          </div>
          <div>
            <span class="pr-2">error rate:</span>
            <span>{{ accuracyCount[0] }}/{{ accuracy.length }}={{ errorRate }}%</span>
            <span></span>
          </div>
        </div>
        <el-pagination
          background
          :current-page="currentPage"
          :page-sizes="[10, 20, 25, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import NP from 'number-precision'

import _ from 'lodash'
import { getAllHistoryResults } from '@/api/history-results.js'

export default {
  // 组件名称
  name: 'ForecastPage',
  // 注册局部组件
  components: {},
  // 混入的外部功能模块
  mixins: [],
  // 接收的外部传入参数
  props: {},
  // 定义响应式的数据属性
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pageSize: 25,
      total: 0,
      tableHeight: 0,
      // 准确率列表
      accuracyList: []
    }
  },
  computed: {
    accuracy() {
      return this.accuracyList.map((item) => item.accuracy)
    },
    accuracyCount() {
      return _.countBy(this.accuracy)
    },
    successRate() {
      if (_.isEqual(this.accuracyCount, {})) {
        return 0
      } else {
        const result = NP.divide(this.accuracyCount[1], this.accuracy.length)
        const roundedResult = NP.round(result, 2)
        const percentage = NP.times(roundedResult, 100)
        return percentage
      }
    },
    errorRate() {
      if (_.isEqual(this.accuracyCount, {})) {
        return 0
      } else {
        const result = NP.divide(this.accuracyCount[0], this.accuracy.length)
        const roundedResult = NP.round(result, 2)
        const percentage = NP.times(roundedResult, 100)
        return percentage
      }
    }
  },
  created() {
    this.fetchData()
  },
  mounted() {
    this.setHeight()
    window.addEventListener('resize', this.setHeight)
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.setHeight)
  },
  methods: {
    setHeight() {
      const tableContainer = document.querySelector('.table-container')
      this.tableHeight = `${tableContainer.clientHeight - 46}px`
    },
    fetchData() {
      getAllHistoryResults(this.currentPage, this.pageSize)
        .then((httpResponse) => {
          const response = httpResponse.data
          const data = response.data

          const { accuracy_list, list, pagination } = data

          if (response.code === 200) {
            this.tableData = list
            this.total = pagination.total
            this.accuracyList = accuracy_list
          }
        })
        .catch((error) => {
          console.error('获取数据失败:', error)
        })
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.currentPage = 1 // 重置到第一页
      this.fetchData()
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage
      this.fetchData()
    }
  }
}
</script>

<style lang="scss" scoped>
// .forecast {
//   styles
// }
</style>
